<style>
  .pagination {
    margin: 0!important;
  }
</style>
<div class="es-section course-manage-header clearfix">
  <img class="picture" :src="course.cover"/>
  <h1 class="title">
    <a class="link-dark" :href="'/course/'+course.id+'/info'">{{course.name}}</a>
    <!--<span class="label label-success ">更新中</span>-->
    <!--<span class="label label-warning ">已完结</span>-->
    <span v-if="course.status==0" class="label label-warning ">未发布</span>
    <span v-else-if="course.status==1" class="label label-success ">已发布</span>
  </h1>

  <div class="teachers">
    教师：
    <a href="/user/${user.id}/home">${user.username}</a>
  </div>

  <div class="toolbar hidden-xs">
    <div v-if="course.status==0">
      <div class="btn-group">
        <a class="btn btn-default btn-sm" target="_blank"
           :href="'/course/'+course.id+'/join/info?v=1'">预览</a>
      </div>
      <div class="btn-group">
        <button class="btn btn-primary btn-sm" data-loading="发布中..."
                @click="publish">发布课程</button>
      </div>
    </div>
    <div v-else-if="course.status==1">
      <div class="btn-group">
        <button class="btn btn-warning btn-sm" data-loading="取消中..."
                @click="unpublish">取消发布</button>
      </div>
      <div class="btn-group">
        <a class="btn btn-default btn-sm" :href="'/course/'+course.id+'/join/info'">课程主页</a>
      </div>
    </div>
  </div>
</div>
<script>
  var Hvm = new Vue({
    el: '.es-section',
    data: {
      course: {
        id: ${kid}
      }
    },
    methods: {
      publish: function () {
        $.post('/course/set/' + this.course.id + "/publish", function (data) {
          if (data.success) {
            Hvm.course.status = 1;
          }
        });
      },
      unpublish: function () {
        $.post('/course/set/' + this.course.id + "/unpublish", function (data) {
          if (data.success) {
            Hvm.course.status = 0;
          }
        });
      }
    },
    mounted: function () {
      $.post('/course/api/' + this.course.id, function (data) {
        if (data.success) {
          Hvm.course = data.payload;
        }
      });
    }
  })
</script>